 var arr = [
    {   //  1
        width:400,
        top:70,
        left:50,
        opacity:20,
        z:2
    },
    {  // 2
        width:600,
        top:120,
        left:0,
        opacity:80,
        z:3
    },
    {   // 3
        width:800,
        top:100,
        left:200,
        opacity:100,
        z:4
    },
    {  // 4
        width:600,
        top:120,
        left:600,
        opacity:80,
        z:3
    },
    {   //5
        width:400,
        top:70,
        left:750,
        opacity:20,
        z:2
    }
];

//获取元素
var slide = document.getElementById("slide");
var liArr = document.querySelectorAll("li");
var arrow = slide.children[1];
//左右按钮
var arrowChild = arrow.children;
//自动轮播定时器
var slide_timer = null;
//控制动画结束后再执行
var flag = true;

//鼠标移入左右箭头显示隐藏
slide.onmouseenter = function(){
	animate(arrow,{"opacity":100});
	clearInterval(slide_timer);
	
}
slide.onmouseleave = function(){
	animate(arrow,{"opacity":0});
	autoplay();
}

//给五个盒子设置不同的样式
move();

//左右按钮功能
for(var k in arrowChild){
	arrowChild[k].onclick = function(){
		if(this.className == "prev"){
			if(flag){
				flag = false;
				move(true);
			}
		}
		else{
			if(flag){
				flag = false;
				move(false);
			}
		}
	}
}

autoplay();

//自动播放轮播图
function autoplay(){
	clearInterval(slide_timer);
	slide_timer = setInterval(function(){
		move(false);
	},2000);
}

//轮播图运转
//传入布尔值，true为顺时针前进，fasle为逆时针前进
function move(bool){
	//清除bug，页面刷新时会自动播放一次
	if(bool != undefined){
		if(bool){
			//顺时针前进
			arr.unshift(arr.pop());
		}
		else{
			//逆时针前进
			arr.push(arr.shift());
		}
	}
	//重新生成样式
	for(var i = 0;i<liArr.length;i++){
		animate(liArr[i],{
			"width":arr[i].width,
	        "top":arr[i].top,
	        "left":arr[i].left,
	        "opacity":arr[i].opacity,
	        "zIndex":arr[i].z
		},function(){
			//动画结束后执行
			flag = true;
		});
	}
}



//缓动动画封装
//对传入的json做以下处理
//对opactiy进行百进制处理，防止精度丢失
//对z-index建议使用驼峰处理
function animate(ele,json,fn){
	//要用定时器，先清定时器
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		//开闭原则,用于清除定时器(修复bug)
		var bool = true;
		//获取初始位置,通过getComputedStyle()获取行外样式
		for(var k in json){
			//设置初始位置
			var leader;
			//对opacity的处理
			if(k == "opacity"){
				leader = getStyle(ele,k)*100 || 1;
			}
			//正常处理
			else{
				leader = parseInt(getStyle(ele,k)) || 0;
			}
			//生成一个步长
			var step = (json[k] - leader) / 10;
			//处理步长，步长为正向上取整，为负向下取整
			step = step>0?Math.ceil(step):Math.floor(step);
			//开始出发，初始位置加上步长
			leader += step;
			//开始赋值						
			if(k == "opacity"){
				//特殊情况特殊赋值
				ele.style[k] = leader/100;
				//兼容ie
				ele.style.filter = "alpha(opacity="+leader+")";
			}
			//层级只需直接赋值
			else if(k == "zIndex"){
				ele.style[k] = json[k];
			}
			else{
				ele.style[k] = leader + "px";
			}
			
			//如果json里面有任意一个键值对的值没有对应leader，bool不能为true
			if(json[k] !== leader){
				bool = false;
			}
		}
		//清除定时器
		if(bool){
			clearInterval(ele.timer);
			//回调
			if(fn){
				fn();
			}
		}
	},25);
}

//封装一个获取行外样式的方法
function getStyle(ele,attr){
	if(window.getComputedStyle){
		//w3c标准
		return window.getComputedStyle(ele,null)[attr];
	}
	//兼容ie
	return ele.currentStyle[attr];
}
